<template>
	<div class="Content-main">

		<div class="main-main">
			<div class="main-lbt">
				<el-carousel :interval="4000" type="card" style="width: 100%;,height: 100%;">
					<el-carousel-item v-for="(item,index) in listimg" :key="index">
						<div class="demo-carousel"><img :src="item.imageUrl" style="width: 100%;height: 100%;"></div>
					</el-carousel-item>
				</el-carousel>
			</div>
			<div class="main-nr">
				<div class="bt">
					<span>推荐</span>
				</div>
				<div class="main">
					<div class="main-item" v-for="(item,index) in personalizedlist" :key="index">
						<div class="img" @click="playlistDetail(item.id)">
							<img v-lazy="item.picUrl" />
							<div class="bfs">
								<span>{{ item.playCount | playCountw}}</span>
							</div>
						</div>
						<div class="main-item-bott">
							{{item.name}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				listimg: [],
				personalizedlist: [],
				value2: 0
			}
		},
		components: {

		},
		methods: {
			playlistDetail(id) {                  //获取歌单详情
				this.$api.playlist_detail({
					id: id
				}).then(res => {
					this.$router.push({path:'/songsheet',query:{data:res}})
				})
			},
			getPersonalized() {          //获取推荐歌单
				this.$api.personalized().then(res => {
					this.personalizedlist = res.result;
				})

			},
			getBanner() {               //获取轮播图
				this.$api.banner().then(res => {
					this.listimg = res.banners;
				})
			}
		},
		mounted() {
			this.getPersonalized()
			this.getBanner();
		},
		filters: {
			playCountw(e) {
				return Math.ceil(e / 10000) + '万';
			}
		}
	}
</script>

<style scoped="scoped">
	.Content-main {
		width: 100%;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.main-main {
		width: 100%;
		padding: 10px 100px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.main-nr {
		width: 1024px;
	}

	.main-lbt {
		width: 100%;
		height: 300px;
	}

	.main-lbt .demo-carousel {
		width: 100%;
		height: 300px;
	}

	.bt {
		width: 100%;
		height: 30px;
		box-shadow: 0px 1px 1px -1px;
		display: flex;
		align-items: center;
		margin-bottom: 30px;
	}

	.bt span {
		font-size: 14px;
		font-weight: bold;
		color: #999999;
	}

	.main {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.main-item {
		width: 180px;
		margin: 12px;
		margin-bottom: 30px;
	}

	/* 	.hotlist:after {
	        content: "";
	        width: 17%;
	} */
	.main-item .img {
		position: relative;
		cursor: pointer;
		width: 100%;
		height: 205px;
		box-shadow: 0px 0px 5px;
	}

	.main-item .img .bfs {
		position: absolute;
		right: 0;
		top: 0;
		width: 60px;
		text-align: center;
		color: #EEEEEE;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.main-item .img img {
		width: 100%;
		height: 100%;
	}

	.main-item-bott {
		font-size: 13px;
		color: #999999;
		margin-top: 5px;
		width: 100%;
		height: 30px;
	}

	>>>.el-carousel__item {
		border-radius: 10px !important;
	}
</style>
